<template>
    <div class="center-container">
        <h1 class="platform-title">大数据就业智能分析平台</h1>
        <div class="container" :class="{ 'right-panel-active': isRightPanelActive }" ref="loginBox">
            <div class="form-container sign-up-container" v-if="activePanel === 'sign-up'">
                <form>
                    <h1>注册</h1>
                    <div class="txtb">
                        <input type="text" v-model="signUpData.userName" @focus="handleInputFocus" @blur="handleInputBlur">
                        <span data-placeholder="用户名"></span>
                    </div>
                    <div class="txtb">
                        <input type="email" v-model="signUpData.email" @focus="handleInputFocus" @blur="handleInputBlur">
                        <span data-placeholder="电子邮箱"></span>
                    </div>
                    <div class="txtb">
                        <input type="password" v-model="signUpData.password" @focus="handleInputFocus"
                            @blur="handleInputBlur">
                        <span data-placeholder="密码"></span>
                    </div>
                    <div class="txtb">
                        <input type="password" v-model="signUpData.confirmPassword" @focus="handleInputFocus"
                            @blur="handleInputBlur">
                        <span data-placeholder="确认密码"></span>
                    </div>
                    <div class="tags">
                        <button @click="dialogFormVisible = true" type="button">请点击选择你的兴趣</button>
                    </div>
                    <button @click="sendSignUp" type="button">注册</button>
                </form>
            </div>

            <div class="form-container sign-in-container" v-if="activePanel === 'sign-in'">
                <form>
                    <h1>登录</h1>
                    <div class="txtb">
                        <input type="text" v-model="signInData.userName" @focus="handleInputFocus" @blur="handleInputBlur">
                        <span data-placeholder="用户名"></span>
                    </div>
                    <div class="txtb">
                        <input type="password" v-model="signInData.password" @focus="handleInputFocus"
                            @blur="handleInputBlur">
                        <span data-placeholder="密码"></span>
                    </div>
                    <a href="#">忘记密码？</a>
                    <button @click="sendSignIn" type="button">登录</button>
                </form>
            </div>

            <div class="overlay-container">
                <div class="overlay" :class="{ 'right-panel-active': activePanel === 'sign-up' }">
                    <div class="overlay-panel overlay-left">
                        <h1>已有账号？</h1>
                        <p>请使用您的账号进行登录</p>
                        <button class="ghost" @click="switchToSignIn">登录</button>
                    </div>
                    <div class="overlay-panel overlay-right">
                        <h1>没有账号?</h1>
                        <p>立即注册加入我们，和我们一起开始旅程吧</p>
                        <button class="ghost" @click="switchToSignUp">注册</button>
                    </div>
                </div>
            </div>
        </div>
        <div>
            <el-dialog v-model="dialogFormVisible" title="选择兴趣" width="30%">
                <el-form :model="tagsSelect">
                    <el-form-item label="学习兴趣" label-width="140px">
                        <el-cascader :options="resourceTagsOptions" clearable :props="props" v-model="resourceTags" />
                    </el-form-item>
                    <el-form-item label="岗位兴趣" label-width="140px">
                        <el-cascader :options="employmentTagsOptions" clearable :props="props" v-model="employmentTags" />
                    </el-form-item>
                </el-form>
                <template #footer>
                    <span class="dialog-footer">
                        <el-button @click="dialogFormVisible = false" class="dialogButton">取消</el-button>
                        <el-button type="primary" @click=saveTags class="dialogButton">
                            确认
                        </el-button>
                    </span>
                </template>
            </el-dialog>
        </div>
    </div>
</template>
  
<script setup>
import { ref, reactive } from 'vue';
import login from '../../apis/login'
import cookie from "js-cookie";
const dialogFormVisible = ref(false)
const activePanel = ref('sign-in');
const isRightPanelActive = ref(false);
const tagsSelect = ref([])
const token = ref()
const props = { multiple: true }
const resourceTagsOptions = [
    {
        value: 'Spark',
        label: 'Spark'
    },
    {
        value: 'Kafka',
        label: 'Kafka'
    },
    {
        value: '机器学习(研发)',
        label: '机器学习(研发)'
    },
    {
        value: 'MongoDB',
        label: 'MongoDB'
    },
    {
        value: 'Pandas',
        label: 'Pandas'
    },
    {
        value: 'Python',
        label: 'Python'
    }
]
const employmentTagsOptions = [
    {
        value: '运维',
        label: '运维'
    },
    {
        value: '架构',
        label: '架构'
    },
    {
        value: '开发',
        label: '开发'
    },
    {
        value: '算法',
        label: '算法'
    },
    {
        value: '治理',
        label: '治理'
    },
    {
        value: '管理',
        label: '管理'
    },
    {
        value: '挖掘',
        label: '挖掘'
    },
    {
        value: '采集',
        label: '采集'
    },
    {
        value: '分析',
        label: '分析'
    },
    {
        value: '可视化',
        label: '可视化'
    }
]
const resourceTags = ref([])
const employmentTags = ref([])
// 注册数据
const signUpData = reactive({
    userName: '',
    email: '',
    password: '',
    resourceTags: '',
    employmentTags: ''
    // confirmPassword: '',
});
// 登录数据
const signInData = reactive({
    userName: '',
    password: '',
});

const switchToSignIn = () => {
    activePanel.value = 'sign-in';
    isRightPanelActive.value = false;
};

const switchToSignUp = () => {
    activePanel.value = 'sign-up';
    isRightPanelActive.value = true;
};

const handleInputFocus = (event) => {
    event.target.classList.add('focus');
};

const handleInputBlur = (event) => {
    if (event.target.value === '') {
        event.target.classList.remove('focus');
    }
};

const sendSignUp = async () => {
    console.log("signUpData:", signInData)
    const res = await login.signUp(signUpData);
    // 这里可以根据具体的响应结果来判断是否请求成功
    if (res.code === 20000) {
        ElMessage({
            message: '注册成功！',
            type: 'success',
        })
        // 注册成功跳转登录
        switchToSignIn()
    } else {
        // 后端异常报错信息在这里获得
        ElMessage({
            message: '注册失败！' + res.message,
            type: 'error',
        })
    }

};

const sendSignIn = async () => {
    const res = await login.signIn(signInData);
    if (res.code === 20001) {
        ElMessage({
            message: "登录失败！" + res.message,
            type: 'error',
        })
        // 登录成功
    } else {
        token.value = res.data.token
        cookie.set('analysis_token', token.value, { domain: '.apresunday.online' })
        // cookie.set('analysis_token', token.value, { domain: 'localhost' })

        const infoRes = await login.getUserInfo()
        if (infoRes.data.user) {
            cookie.set("analysis_user", JSON.stringify(infoRes.data.user), { domain: ".apresunday.online" })
            // cookie.set("analysis_user", JSON.stringify(infoRes.data.user), { domain: "localhost" })

        }
        window.location.href = "#/"
    }
}

// 保存兴趣
const saveTags = () => {
    signUpData.resourceTags = resourceTags.value.join('/')
    signUpData.employmentTags = employmentTags.value.join('/')
    dialogFormVisible.value = false
}


</script>
  
<style scoped src="../../assets/css/login.css"></style>
  